<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <!-- Meta Tags -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <meta name="description" content="Oellfare - Charity Template">
        <meta name="author" content="">

        <!-- Page Title -->
        <title>链上善行公益-平台活动</title>

        <!-- Favicon and Touch Icons -->
        <link href="front/images/logo1.png" rel="shortcut icon" type="image/png">

        <!-- Lead Style -->
        <link href="front/css/style.css" rel="stylesheet" type="text/css">



        <style>
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            .itema{
                margin-top: 10px;
                font-weight: bold;

            }
            .notification-btn {
                border: none;
                background-color: transparent;
            }

            .notification {
                position: fixed;
                top: 20px;
                right: 20px;
                z-index: 999;
                padding: 10px 20px;
                border-radius: 5px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
                opacity: 0;
                transform: translateY(-10px);
                transition: all 0.3s ease-in-out;
            }

            .notification.show {
                opacity: 1;
                transform: translateY(0);;
            }

            .notification.success {
                background-color: #e1f3d8;
                color: #4caf50;
            }

            .notification.warning {
                background-color: #fffbe6;
                color: #ffca28;
            }

            .notification.info {
                background-color: #e6f7ff;
                color: #2196f3;
            }

            .notification.error {
                background-color: #ffebee;
                color: #f44336;
            }
        </style>
    </head>
    <!--PreLoader-->
    <div class="preloader">
        <div class="preloader-inner">
            <div class="siteloading-preloader"></div>
        </div>
    </div>
    <!--PreLoader Ends-->
    <body>
        <div th:replace="commons/front-bar::#header(currUri='activities',links=${links})"></div>

        <div class="page-header">
            <div class="page-header-content">
                <div class="container">
                    <h2 class="heading">最新活动</h2>
                </div>
            </div>
        </div>

        <div class="main-wrapper">

            <div class="section blog">
                <div class="container">
                    <div th:each="article, stat : ${articles}"
                         class="power_blog style_3"
                         th:classappend="${stat.index % 2 == 0}? 'wow bounceInLeft' : 'wow bounceInRight'">
                        <div class="power_blog_wrapper">
                            <div class="power_blog_image">
                                <img style="width: 100%;height: 500px" th:src="${article.img}" alt="">
                            </div>
                            <div class="power_blog_content">
                                <ul class="post_meta">
                                    <li><span class="date">发布于：[[${#dates.format(article.gmtCreate,'yyyy年MM月dd日 HH:mm:ss')}]]</span></li>
                                    <li><span class="author"> 阅读量：<a th:text="${article.readCount}" style="position: absolute;right: -15px; color: #000000"></a></span></li>
                                </ul>
                                <h5><a th:href="@{activity(id=${article.id})}" th:text="${article.title}" style="color: #000000"></a></h5>
                                <div class="power_button_group">
                                    <a th:href="@{activity(id=${article.id})}" class="power_button effect_1">
                                        <span class="button_value">查看活动</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <hr>
                    </div>



                </div>
            </div>

        </div>

        <div th:replace="commons/front-bar::#footer"></div>

         <!-- All JavaScript Files
        ================================================== -->

        <script src="common/js/jquery.min.js"></script>
        <script src="front/js/bootstrap.min.js"></script>
        <script src="front/js/menu.js"></script>
        <script src="front/js/select2.js"></script>
        <script src="front/js/jquery.fancybox.min.js"></script>
        <script src="front/js/owl.carousel.min.js"></script>
        <script src="front/js/spectragram.min.js"></script>
        <script src="front/js/wow.js"></script>
        <script src="front/js/custom.js"></script>
        <script>
            new WOW().init();

            localStorage.setItem('url',window.location.href);
            //来进行监视数据
            var surveyRatingSelect = document.getElementById('surveyRating');
            surveyRatingSelect.addEventListener('change', function() {
            });
            function ToSatisFac(){
                $.ajax({
                    url: "/blockchain-kindness/donations/addSatisfaction",
                    type: "post",
                    data: {
                        grade : surveyRatingSelect.value
                    },
                    success: function (data) {
                        if(data.message === '投票成功') {
                            var element = document.querySelector('#opt_success');
                            element.click();
                            function hideModalAndShowAnother() {
                                $('#surveyModal').modal('hide'); // 关闭模态对话框
                            }
                            setTimeout(hideModalAndShowAnother, 3000);
                        }else{
                            alert("您没有输入合适的信息")
                        }
                    },
                    error: function (data) {
                    }
                });
            }
        </script>
        <script>

            function createNotification(type, title, message) {
                const notificationDiv = document.createElement('div');
                notificationDiv.classList.add('notification', type, 'show');

                const titleElement = document.createElement('strong');
                titleElement.textContent = title;
                notificationDiv.appendChild(titleElement);

                const messageElement = document.createElement('p');
                messageElement.textContent = message;
                notificationDiv.appendChild(messageElement);
                const Container = document.getElementById('notifications1');
                Container.appendChild(notificationDiv);

                setTimeout(() => {
                    notificationDiv.classList.remove('show');
                    setTimeout(() => {
                        Container.removeChild(notificationDiv);
                    }, 300);
                }, 2000);
            }

            function openSuccess() {
                createNotification('success', '感谢您的反馈，我们会做的更好');
            }

            function openWarning() {
                createNotification('warning', '警告', '这是一条警告的提示消息');
            }

            function openInfo() {
                createNotification('info', '消息', '这是一条消息的提示消息');
            }

            function openError() {
                createNotification('error', '错误', '您输入的信息有错，请重新输入');
            }
        </script>
    </body>
</html>